<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页-车主</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../libs/mui/mui.css" />
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />		
		<style>
			/*头部*/
			.mui-bar.mui-bar-nav {-webkit-box-shadow: 0 1px 6px #ccc;box-shadow: 0 1px 6px #ccc;}
			.mui-slider .mui-slider-group .mui-slider-item,.mui-table-view.mui-grid-view .mui-table-view-cell{font-size: 16px;}			
			.mui-content-padded{margin: 0;}	
			
			.mui-segmented-control {background-color: white;}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #34b3f1;}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {background-color: #34b3f1;}
			/*中间详情*/
			.marg{margin-top: 5px;}
			.mui-table-view.mui-grid-view{padding: 0;}
			.mui-table-view.mui-grid-view .mui-table-view-cell {text-align: left;padding: 11px 6px;}
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{height: 75px;}						
			/*合计*/
			.total{width: 100%;line-height: 30px;border-top: 1px solid #efeff4;}
			.total button{width: 80px;line-height: 15px;overflow: hidden;}
			.total span:nth-child(2){display: inline-block;float: right;}
			/*侧滑-个人中心*/
			.head{background: url(../public/img/1.jpg);background-size: cover;height: 200px;width: 100%;color: white;}
			.bbs-pulish-img img{height:100px;width:100px;margin-top: 30px;border-radius: 100%;}
			.mui-table-view-inverted {color: #333;background: white;margin-bottom: 5px;}
			.mui-off-canvas-left, .mui-off-canvas-right{background: #efeff4;}
			.mui-table-view-inverted .mui-table-view-cell.mui-active, .mui-table-view-inverted .mui-table-view-cell>a:not(.mui-btn).mui-active {background-color: #ff6766;}
			.mui-badge {background: rgba(255,0,0,0.8);position: absolute;top: 5px;left: 39%;padding: 2px 5px;color: white;}
			/*背景色*/
			.Person {background: white;padding-left: 15px;}
			.Person div {border-bottom: 1px solid #efeff4;padding: 11px 0px;overflow: hidden;padding-right: 15px;}
			.Person i {color: #AAAAAA;}			
		</style>
	</head>
	<body ng-app="store" ng-controller="storeController">		
		<!--侧滑菜单容器-->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">			
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="content">
							<div class="head">
								<div class="bbs-pulish-img mui-text-center">
									<img src="{{user_pic}}{{avatar}}" />
									<div>{{store_name}}</div>
								</div>								
							</div>
						</div>	
						<div class="Person">							
							<div class="Personl">
								<i class="iconfont">&#xe723;</i>
								<span>个人资料</span>
							</div>						
							<div class="Query">
								<i class="iconfont">&#xe613;</i>
								<span>订单量查询</span>
							</div>							
							<div class="Set">								
								<i class="iconfont">&#xe60b;</i>
								<span>设置</span>															
							</div>
						</div>					
					</div>					
				</div>				
			</aside>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">					    
				    <h1 class="mui-title">抢单</h1>
				    <a id="offCanvasBtn" href="#offCanvasSide" class="mui-pull-right mui-icon">
						<i class="iconfont">&#xe61d;</i>
					</a>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-content-padded" id="offCanvasShow">
							<div id="slider" class="mui-slider">
								<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
									<a class="mui-control-item mui-active" href="#item1mobile">新订单</a>
									<a class="mui-control-item" href="#item2mobile">已接单</a>
									<a class="mui-control-item" href="#item3mobile">配送中</a>
									<a class="mui-control-item" href="#item4mobile">已完成</a>
									<a class="mui-control-item" href="#item5mobile">已退款</a>
								</div>
								<div id="sliderProgressBar" class="mui-slider-progress-bar mui-text-center mui-active" style="width: 20%;"></div>
								<div class="mui-slider-group">
									<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
										<div id="scroll1" class="mui-scroll-wrapper">
											<div class="mui-scroll">								
												<ul class="mui-table-view mui-grid-view marg" ng-repeat="(key,val) in order_list | filter:{order_state:'10'}"> 
													<div ng-repeat="(k,v) in val.goods_list"> 
														<li class="mui-table-view-cell mui-col-xs-3">
															<img class="mui-media-object mui-pull-left" src="{{pics}}{{val.store_id}}/{{v.goods_image}}"/>
														</li>
														<li class="mui-table-view-cell mui-col-xs-9">
															<div class="mui-ellipsis-2">{{v.goods_name}}</div>										
															<div class="money">
																<span>￥{{v.goods_price}}</span>
																<span>x{{v.goods_num}}</span>
															</div>
														</li>
													</div>	
													<li class="mui-table-view-cell total">										
														<span>合计：￥{{val.order_amount}}</span>
														<span>
															<button type="button" class="mui-btn RGB" ng-click="iteams(val.order_sn)">订单详情</button> 
															<button type="button" class="mui-btn RGB" ng-click="cancel(val.order_id)">取消订单</button>	
														</span>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<div id="item2mobile" class="mui-slider-item mui-control-content">
										<div id="scroll2" class="mui-scroll-wrapper">
											<div class="mui-scroll">
												<ul class="mui-table-view mui-grid-view marg" ng-repeat="(key,val) in order_list | filter:{order_state:'20',refund_state:'0'}">
													<div ng-repeat="(k,v) in val.goods_list">	
														<li class="mui-table-view-cell mui-col-xs-3">
															<img class="mui-media-object mui-pull-left" src="{{pics}}{{val.store_id}}/{{v.goods_image}}"/>
														</li>
														<li class="mui-table-view-cell mui-col-xs-9">
															<div class="mui-ellipsis-2">{{v.goods_name}}</div>										
															<div class="money">
																<span>￥{{v.goods_price}}</span>
																<span>x{{v.goods_num}}</span>
															</div>
														</li>
													</div>	
													<li class="mui-table-view-cell total">										
														<span>合计：￥{{val.order_amount}}</span>
														<span>
															<button type="button" class="mui-btn RGB" ng-click="iteams(val.order_sn)">订单详情</button> 
															<button type="button" class="mui-btn RGB" ng-click="distribution(val.order_id)">配送</button>	
														</span>
													</li>
												</ul>		
											</div>
										</div>
									</div>
									<div id="item3mobile" class="mui-slider-item mui-control-content">
										<div id="scroll3" class="mui-scroll-wrapper">
											<div class="mui-scroll">
												<ul class="mui-table-view mui-grid-view marg" ng-repeat="(key,val) in order_list | filter:{order_state:'30',refund_state:'0'}">
													<div ng-repeat="(k,v) in val.goods_list">
														<li class="mui-table-view-cell mui-col-xs-3">
															<img class="mui-media-object mui-pull-left" src="{{pics}}{{val.store_id}}/{{v.goods_image}}"/>
														</li>
														<li class="mui-table-view-cell mui-col-xs-9">
															<div class="mui-ellipsis-2">{{v.goods_name}}</div>										
															<div class="money">
																<span>￥{{v.goods_price}}</span>
																<span>x{{v.goods_num}}</span>
															</div>
														</li>
													</div>	
													<li class="mui-table-view-cell total">										
														<span>合计：￥{{val.order_amount}}</span>
														<span>
															<button type="button" class="mui-btn RGB" ng-click="iteams(val.order_sn)">订单详情</button> 
															<button type="button" class="mui-btn RGB" ng-click="complete(val.order_id)">完成</button>	
														</span>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<div id="item4mobile" class="mui-slider-item mui-control-content">
										<div id="scroll4" class="mui-scroll-wrapper">
											<div class="mui-scroll">
												<ul class="mui-table-view mui-grid-view marg" ng-repeat="(key,val) in order_list | filter:{order_state:'40',refund_state:'0'}">
													<div ng-repeat="(k,v) in val.goods_list" class="order_list" data-order_sn="{{val.order_sn}}">
														<li class="mui-table-view-cell mui-col-xs-3">
															<img class="mui-media-object mui-pull-left" src="{{pics}}{{val.store_id}}/{{v.goods_image}}"/>
														</li>
														<li class="mui-table-view-cell mui-col-xs-9">
															<div class="mui-ellipsis-2">{{v.goods_name}}</div>										
															<div class="money">
																<span>￥{{v.goods_price}}</span>
																<span>x{{v.goods_num}}</span>
															</div>
														</li>
													</div>	
													<li class="mui-table-view-cell total">										
														<span>合计：￥{{val.order_amount}}</span>
														<span class="gray">
															<button type="button" class="mui-btn RGB" ng-click="iteams(val.order_sn)">订单详情</button> 
															已完成</span>
													</li>
												</ul>	
											</div>
										</div>
									</div>
									<div id="item5mobile" class="mui-slider-item mui-control-content">
										<div id="scroll5" class="mui-scroll-wrapper">
											<div class="mui-scroll">
												<ul class="mui-table-view mui-grid-view marg" ng-repeat="(key,val) in order_list | filter:{refund_state:'1'}">
													<div ng-repeat="(k,v) in val.goods_list" class="order_list" data-order_sn="{{val.order_sn}}">
														<li class="mui-table-view-cell mui-col-xs-3">
															<img class="mui-media-object mui-pull-left" src="{{pics}}{{val.store_id}}/{{v.goods_image}}"/>
														</li>  
														<li class="mui-table-view-cell mui-col-xs-9">
															<div class="mui-ellipsis-2">{{v.goods_name}}</div>										
															<div class="money">
																<span>￥{{v.goods_price}}</span>
																<span>x{{v.goods_num}}</span>
															</div>
														</li>
													</div>	
													<li class="mui-table-view-cell total">										
														<span>合计：￥{{val.order_amount}}</span>
														<span class="gray">
															<button type="button" class="mui-btn RGB" ng-click="iteams(val.order_sn)">订单详情</button> 
															已退款</span>
													</li>
												</ul>	
											</div>
										</div>
									</div>
								</div>
							</div>							
						</div>	
					</div>
				</div>	
				<div class="mui-off-canvas-backdrop"></div>
			</div>	
		</div>	
		</body> 
		<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
		<script src="../js/mui.min.js"></script> 
		<script src="../js/open.js"></script> 
		<!--<script type="text/javascript" src="../libs/mui/mui.js"></script>-->
		<script type="text/javascript" src="../js/store_js/angular.js" ></script>
		<script type="text/javascript" src="../js/store_js/public.js" ></script>
		<script type="text/javascript" src="../js/store_js/order.js" ></script>
		<script>
			mui.init({ 
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
			//高度自适应	
			$(document).ready(function() {
				$(".mui-control-content").css({"min-height": (document.documentElement.clientHeight - 88) + "px"});
				$("#slider").css({"min-height": (document.documentElement.clientHeight - 33) + "px"});
			})
//			个人资料
//			$(".Personl").on("tap",function(){
//				openNewPage('Personal_data.html')
//			})
//			接单量查询
			$(".Query").on("tap",function(){
				openNewPage('Personal_query.html')
			})
//			设置
			$(".Set").on("tap",function(){
				openNewPage('Individual_set.html')
			})
////			已完成 
//			$(".Off").on("tap",function(){
//				openNewPage('orders_off.html')
//			})
////			已退款
//			$(".No").on("tap",function(){
//				openNewPage('orders_no.html')
//			})
		</script>	
	<script>
		//侧滑		
		mui.init({
			swipeBack: false
		});
		 //侧滑容器父节点
		var offCanvasWrapper = mui('#offCanvasWrapper');
		 //主界面容器
		var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
		 //菜单容器
		var offCanvasSide = document.getElementById("offCanvasSide");
		 //Android暂不支持整体移动动画
		if (!mui.os.android) {
			document.getElementById("move-togger").classList.remove('mui-hidden');
			var spans = document.querySelectorAll('.android-only');
			for (var i = 0, len = spans.length; i < len; i++) {
				spans[i].style.display = "none";
			}
		}
		 //移动效果是否为整体移动
		var moveTogether = false;
		 //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
		var classList = offCanvasWrapper[0].classList;
		 //变换侧滑动画移动效果；
		mui('.mui-input-group').on('change', 'input', function() {
			if (this.checked) {
				offCanvasSide.classList.remove('mui-transitioning');
				offCanvasSide.setAttribute('style', '');
				classList.remove('mui-slide-in');
				classList.remove('mui-scalable');
				switch (this.value) {
					case 'main-move':
						if (moveTogether) {
							//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
							offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
							moveTogether = false;
						}
						break;
					case 'main-move-scalable':
						if (moveTogether) {
							//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
							offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
						}
						classList.add('mui-scalable');
						break;
					case 'menu-move':
						classList.add('mui-slide-in');
						break;
					case 'all-move':
						moveTogether = true;
						//整体滑动时，侧滑菜单在inner-wrap内
						offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
						break;
				}
				offCanvasWrapper.offCanvas().refresh();
			}
		});
//		document.getElementById('offCanvasShow').addEventListener('tap', function() {
//			offCanvasWrapper.offCanvas('show');
//		});
//		document.getElementById('offCanvasHide').addEventListener('tap', function() {
//			offCanvasWrapper.offCanvas('close');
//		}); 
		 //主界面和侧滑菜单界面均支持区域滚动；
		mui('#offCanvasSideScroll').scroll();
		mui('#offCanvasContentScroll').scroll();
		 //实现ios平台的侧滑关闭页面；
		if (mui.os.plus && mui.os.ios) {
			offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
				plus.webview.currentWebview().setStyle({
					'popGesture': 'none'
				});
			});
			offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
				plus.webview.currentWebview().setStyle({
					'popGesture': 'close'
				});
			});
		} 
		
	</script>	
</html>